<template>
  <el-dialog v-bind="$attrs" @close="handleClose" @open="handleOpen">
    <div>
      <el-form
        @submit.prevent.native
        label-position="top"
        :model="form"
        ref="categoryForm"
        :rules="rules"
      >
        <el-form-item
          :label="$t('appstore.application.category_name_en') + ':'"
          prop="categoryNameEn"
        >
          <el-input
            maxlength="32"
            show-word-limit
            v-model="form.categoryNameEn"
            @blur="() => (form.categoryNameEn = form.categoryNameEn.trim())"
            :placeholder="$t('appstore.application.category_name_en')"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('appstore.application.category_name_zh') + ':'"
          prop="categoryNameZh"
        >
          <el-input
            maxlength="32"
            show-word-limit
            v-model="form.categoryNameZh"
            @blur="() => (form.categoryNameZh = form.categoryNameZh.trim())"
            :placeholder="$t('appstore.application.category_name_zh')"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('appstore.application.category_name_pt') + ':'"
          prop="categoryNamePt"
        >
          <el-input
            maxlength="32"
            show-word-limit
            v-model="form.categoryNamePt"
            @blur="() => (form.categoryNamePt = form.categoryNamePt.trim())"
            :placeholder="$t('appstore.application.category_name_pt')"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('appstore.application.category_name_ja') + ':'"
          prop="categoryNameJa"
        >
          <el-input
            maxlength="32"
            show-word-limit
            v-model="form.categoryNameJa"
            @blur="() => (form.categoryNameJa = form.categoryNameJa.trim())"
            :placeholder="$t('appstore.application.category_name_ja')"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('appstore.application.category_sort') + ':'"
          prop="indexSort"
        >
          <el-input
            v-model.number="form.indexSort"
            :placeholder="$t('appstore.application.category_sort_tip')"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('appstore.application.category_icon') + ':'"
          prop="categoryIconUrl"
        >
          <div style="overflow-y: scroll; height: 350px">
            <div class="flex flex-wrap" style="justify-content: start">
              <label v-for="(url, index) in iconsUrl" :key="url" class="option-item">
                <input
                  v-model="form.categoryIconUrl"
                  type="radio"
                  class="checkbox"
                  name="icon"
                  :value="url"
                  checked
                />
                <div class="option-inner option">
                  <div>
                    <div class="icon">
                      <el-image :src="getImg(url)" :id="'image' + (index + 1)"></el-image>
                    </div>
                  </div>
                </div>
              </label>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button text @click="handleClose">{{ $t("page.cancel") }}</el-button>
        <el-button type="primary" :loading="confirmLoading" @click="saveCategory()">{{
          $t("common.confirm")
        }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import {
  categoryAdd,
  categoryDefaultIcons,
  categoryInfo,
  categoryUpdate,
} from "@/api/app-category";

export default {
  components: {},
  inheritAttrs: false,
  props: {
    categoryId: Number,
  },
  data() {
    return {
      confirmLoading: false,
      iconsUrl: [],
      form: {
        categoryId: "",
        categoryNameEn: "",
        categoryNameZh: "",
        categoryNamePt: "",
        categoryNameJa: "",
        indexSort: "",
        categoryIconUrl: "",
      },
    };
  },
  computed: {
    rules() {
      return {
        categoryNameEn: [
          {
            required: true,
            message: this.$t("appstore.application.please_input_category_name"),
            trigger: "blur",
          },
        ],
        categoryNameZh: [
          {
            required: true,
            message: this.$t("appstore.application.please_input_category_name"),
            trigger: "blur",
          },
        ],
        categoryNamePt: [
          {
            required: true,
            message: this.$t("appstore.application.please_input_category_name"),
            trigger: "blur",
          },
        ],
        categoryNameJa: [
          {
            required: true,
            message: this.$t("appstore.application.please_input_category_name"),
            trigger: "blur",
          },
        ],
        indexSort: [
          {
            required: true,
            message: this.$t("appstore.application.please_input_category_sort"),
          },
          {
            type: "number",
            message: this.$t("appstore.application.please_input_number"),
          },
          {
            pattern: /^(1\d{2}|200)$/,
            message: this.$t("appstore.application.please_input_number"),
          },
        ],
        categoryIconUrl: [
          {
            required: true,
            message: this.$t("appstore.application.please_select_category_icon"),
            trigger: "blur",
          },
        ],
      };
    },
  },
  methods: {
    handleClose() {
      this.confirmLoading = false;
      this.form.categoryId = "";
      // this.categoryId = undefined;
      this.$refs["categoryForm"].resetFields();
      this.$emit("update:model-value", false);
    },
    handleOpen() {
      this.confirmLoading = false;
      this.form.categoryId = "";
      this.iconsUrl = [];
      if (this.categoryId) {
        this.form.categoryId = this.categoryId;
        this.getCategoryInfo(this.categoryId);
      }
      this.getCategoryDefaultIcons();
      return;
    },
    getCategoryDefaultIcons() {
      categoryDefaultIcons().then((res) => {
        if (res) {
          this.iconsUrl = res;
        }
      });
    },
    getCategoryInfo(categoryId) {
      categoryInfo(categoryId).then((res) => {
        if (res) {
          this.form.categoryNameEn = res.categoryNameEn;
          this.form.categoryNameZh = res.categoryNameZh;
          this.form.categoryNamePt = res.categoryNamePt;
          this.form.categoryNameJa = res.categoryNameJa;
          this.form.indexSort = res.indexSort;
          this.form.categoryIconUrl = res.categoryIconUrl;
          const part = res.categoryIconUrl.replace(/[^0-9]/gi, "");
          document.getElementById("image" + part).scrollIntoView();
        }
      });
    },
    getImg(url) {
      return import.meta.env.VITE_APP_BASE_API + url;
    },
    saveCategory() {
      this.$refs["categoryForm"].validate((valid) => {
        if (valid) {
          this.confirmLoading = true;
          if (this.form.categoryId) {
            categoryUpdate({
              categoryId: this.form.categoryId,
              categoryNameEn: this.form.categoryNameEn,
              categoryNameZh: this.form.categoryNameZh,
              categoryNamePt: this.form.categoryNamePt,
              categoryNameJa: this.form.categoryNameJa,
              indexSort: this.form.indexSort,
              iconData: this.form.categoryIconUrl,
            })
              .then((res) => {
                this.confirmLoading = false;
                this.$message.success(this.$t("common.operated_successfully"));
                this.$emit("refresh");
                this.handleClose();
              })
              .catch((e) => {
                this.confirmLoading = false;
                this.$confirmError(e);
              });
          } else {
            categoryAdd({
              categoryNameEn: this.form.categoryNameEn,
              categoryNameZh: this.form.categoryNameZh,
              categoryNamePt: this.form.categoryNamePt,
              categoryNameJa: this.form.categoryNameJa,
              indexSort: this.form.indexSort,
              iconData: this.form.categoryIconUrl,
            })
              .then((res) => {
                this.confirmLoading = false;
                this.$message.success(this.$t("common.operated_successfully"));
                this.$emit("refresh");
                this.handleClose();
              })
              .catch((e) => {
                this.confirmLoading = false;
                this.$confirmError(e);
              });
          }
        } else {
          return false;
        }
      });
    },
  },
  mounted() {},
  watch: {},
};
</script>

<style lang="scss" scoped>
.option-item {
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  display: flex;
  position: relative;
  width: 130px;
  height: 130px;
  margin: 10px;

  .checkbox {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;

    &:checked {
      display: block;

      & ~ .option-inner {
        border-color: #25d366;
        color: #25d366;

        .tickmark {
          display: block;
        }
      }
    }
  }

  .option-inner {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 5px;
    text-align: center;
    /* padding: 20px 0; */
    cursor: pointer;
    color: #585c68;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 5px solid transparent;
    position: relative;

    .icon {
      margin-bottom: 10px;
    }

    &.option {
      .tickmark {
        border-color: #25d366 transparent transparent #25d366;
      }
    }

    .tickmark {
      position: absolute;
      top: -1px;
      left: -1px;
      border: 20px solid;
      display: none;

      &:before {
        content: "";
        position: absolute;
        top: -15px;
        left: -15px;
        width: 19px;
        height: 9px;
        border: 3px solid;
        border-color: transparent transparent #fff #fff;
        transform: rotate(-45deg);
      }
    }
  }
}
</style>
